<template>
  <el-row :style="{ 'text-align': 'center' }">
    <el-col :span="24">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        @click="changeScale(1)"
        >放大</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-minus"
        size="small"
        @click="changeScale(-1)"
        >缩小</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-refresh-left"
        size="small"
        @click="rotateLeft()"
        >左旋转</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        size="small"
        @click="rotateRight()"
        >右旋转</el-button
      >
    </el-col>
    <el-col :span="24" :style="{ height: '350px', margin: '10px 0' }">
      <VueCropper ref="cropper" v-bind="options"></VueCropper>
    </el-col>
    <el-col>
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </el-col>
  </el-row>
</template>

<script>
import { VueCropper } from 'vue-cropper'

export default {
  name: 'mmv-cur-image',
  components: {
    VueCropper,
  },
  props: {
    img: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {
    options() {
      return {
        img: this.img,
        full: true,
        canMove: true,
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 200, // 默认生成截图框宽度
        autoCropHeight: 200, // 默认生成截图框高度
      }
    },
  },
  methods: {
    onSubmit() {
      this.$refs.cropper.getCropBlob((data) => {
        this.$emit('submit', data)
      })
    },
    onCancel() {
      this.$emit('cancel')
    },

    // 向左旋转
    rotateLeft() {
      this.$refs.cropper.rotateLeft()
    },
    // 向右旋转
    rotateRight() {
      this.$refs.cropper.rotateRight()
    },
    // 图片缩放
    changeScale(num) {
      num = num || 1
      this.$refs.cropper.changeScale(num)
    },
  },
}
</script>
